<template>
  <div>
    <el-card class="box-card">
      <!--      输入栏部分-->
      <div class="text item" :style="height">
        <!--        第一行输入框-->
        <div style="margin-bottom: 20px">
          <el-row>
            <el-col :span="6">
              <div>
                <span style="margin-right: 25px">登录名称:</span>
                <el-input
                    placeholder="输入登录名称模糊查询"
                    v-model="input1"
                    style="width: 70%">
                </el-input>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <span style="margin-right: 25px">用户姓名:</span>
                <el-input
                    placeholder="输入用户姓名模糊查询"
                    v-model="input2"
                    style="width: 70%">
                </el-input>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-button type="primary" @click="">查 询</el-button>
                <el-button @click="">重 置</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>


      <!--      新增操作以及表格部分-->
      <div style="padding-top: 10px">
        <!--        按钮部分-->
        <el-button type="primary"  @click="outerVisible = true" style="margin-right: 10px"><i class="el-icon-plus"></i> 新增</el-button>
        <el-dropdown>
          <el-button plain>
            批量操作
            <svg t="1654231867884"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="2287" width="12" height="12">
              <path
                  d="M517.688889 796.444444c-45.511111 0-85.333333-17.066667-119.466667-51.2L73.955556 381.155556c-22.755556-22.755556-17.066667-56.888889 5.688888-79.644445 22.755556-22.755556 56.888889-17.066667 79.644445 5.688889l329.955555 364.088889c5.688889 5.688889 17.066667 11.377778 28.444445 11.377778s22.755556-5.688889 34.133333-17.066667l312.888889-364.088889c22.755556-22.755556 56.888889-28.444444 79.644445-5.688889 22.755556 22.755556 28.444444 56.888889 5.688888 79.644445L637.155556 739.555556c-28.444444 39.822222-68.266667 56.888889-119.466667 56.888888 5.688889 0 0 0 0 0z"
                  p-id="2288" fill="#409EFF"></path>
            </svg>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-delete">删除</el-dropdown-item>
            <el-dropdown-item icon="el-icon-check">审核</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-close">反审核</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <!--        表格部分-->
        <div style="margin-top: 20px">
          <el-table
              border
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">

            <el-table-column
                type="selection"
                width="35">
            </el-table-column>
            <el-table-column
                label="#"
                width="160">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column
                label="登录名称"
                width="200">
              <template slot-scope="scope">{{ scope.row.number}}</template>
            </el-table-column>
            <el-table-column
                label="用户姓名"
                width="300">
              <template slot-scope="scope">{{ scope.row.info}}</template>
            </el-table-column>
            <el-table-column
                label="用户类型"
                width="200">
              <template slot-scope="scope">{{ scope.row.date}}</template>
            </el-table-column>
            <el-table-column
                label="角色"
                width="100">
              <template slot-scope="scope">{{ scope.row.operator}}</template>
            </el-table-column>
            <el-table-column
                label="机构"
                width="100">
              <template slot-scope="scope">{{ scope.row.amount}}</template>
            </el-table-column>
            <el-table-column
                label="电话号码"
                width="100">
              <template slot-scope="scope">{{ scope.row.get}}</template>
            </el-table-column>
            <el-table-column
                label="排序"
                width="100">
              <template slot-scope="scope">{{ scope.row.change}}</template>
            </el-table-column>
            <el-table-column
                label="状态"
                width="100">
              <template slot-scope="scope">{{ scope.row.state}}</template>
            </el-table-column>
          </el-table>

        </div>

      </div>

      <!--      新增操作弹框-->
      <div>
        <!--        外层的弹框-->
        <el-dialog title="新增" :visible.sync="outerVisible" width="80%" style="min-width: 1600px">
          <el-row>
            登录名称：<el-input placeholder="请输入登录名称"></el-input>
            用户名：<el-input placeholder="请输入用户名"></el-input>
            角色：<el-input placeholder="请选择角色"></el-input>
            机构：<el-input placeholder="请选择机构"></el-input>
            职位：<el-input placeholder="请输入职位"></el-input>
            电话号码：<el-input placeholder="请输入电话号码"></el-input>
            电子邮箱：<el-input placeholder="请输入电子邮箱"></el-input>
            排序：<el-input placeholder="请输入排序"></el-input>
            描述：<el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="textarea">
            </el-input>

          </el-row>
        </el-dialog>
      </div>


    </el-card>
  </div>
</template>

<script>
export default {
  name: "UserList",
  data() {
    return {
      restaurants: [],
      options1: [
        {
          value1: '选项1',
          label1: '123'
        }, {
          value1: '选项2',
          label1: '456'
        }, {
          value1: '选项3',
          label1: '789'
        }, {
          value1: '选项4',
          label1: '987'
        }, {
          value1: '选项5',
          label1: '654'
        }],
      options2: [],
      options3: [],
      options4: [],
      options5: [{
        value5: '选项1',
        label5: '未审核'
      }, {
        value5: '选项2',
        label5: '已审核'
      }],
      options6: [],
      options8: [{
        value8: '选项1',
        label8: '现付'
      }],
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      value5: '',
      value6: '',
      value7date: '',
      value8: '先付',
      input1: '',
      input2: '',
      input3: '',
      input4: 'LSCK00000274203',
      height: 'height: 40px',
      t: '1654086700588',
      p_id: '2321',
      d: 'M517.688889 796.444444c-45.511111 0-85.333333-17.066667-119.466667-51.2L73.955556 381.155556c-22.755556-22.755556-17.066667-56.888889 5.688888-79.644445 22.755556-22.755556 56.888889-17.066667 79.644445 5.688889l329.955555 364.088889c5.688889 5.688889 17.066667 11.377778 28.444445 11.377778s22.755556-5.688889 34.133333-17.066667l312.888889-364.088889c22.755556-22.755556 56.888889-28.444444 79.644445-5.688889 22.755556 22.755556 28.444444 56.888889 5.688888 79.644445L637.155556 739.555556c-28.444444 39.822222-68.266667 56.888889-119.466667 56.888888 5.688889 0 0 0 0 0z',
      dj: '展开',
      tableData: [],
      multipleSelection: [],
      outerVisible: false,
      innerVisible: false,
      textarea: ''
    }
  },

}
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
  overflow: hidden;
  transition: all 0.5s;
}


.box-card {
  margin: 10px 10px 10px 10px;
  height: 600px;
}


</style>
